import React, { Component } from 'react'
import { Text, StyleSheet, View, TouchableOpacity, Image } from 'react-native'
import ImagePicker from 'react-native-image-picker';

const options = {
  title: '选择头像',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '去拍照',
  chooseFromLibraryButtonTitle: '从手机相册中选择'
};

export default class Avatar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      avatar: ''
    }
  }
  
  handleSaveImg = () => {
    // 弹出窗口（去拍照 | 在相册中选择）
    ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled video picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const { uri } = response;
        this.setState({
           avatar: uri
        });
      }
    });
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={() => this.handleSaveImg()}>
          <View
            style={[styles.avatar, styles.avatarContainer]}>
            {this.state.avatar === '' ? (
              <Text style={styles.texs}>+</Text>
            ) : (
                <Image style={styles.avatar} source={{ uri: this.state.avatar }} />
              )}
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
          <Text style={{fontSize: 30, marginVertical: 20}}>回退</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  avatarContainer: {
     borderColor: '#559B9B',
     // borderWidth: 1 / PixelRatio.get(),
     borderWidth: 1,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 100
   },
   avatar: {
     width: 200,
     height: 200,
     borderRadius: 100
   },
   img:{
     flex: 1,
     marginBottom:62
   },
   texs: {
     fontSize: 80,
     color: '#ccc'
   }
 })